<template>
    <div class="home">
        <!-- <h1 class="santiago">桑地亚哥的海景房</h1>
        <h1 class="manchester">曼彻斯特的捕鱼艇</h1> -->
        <div id="nav">
            <router-link to="/">关于</router-link> |
            <router-link to="/jsExplore">编程</router-link>|
            <router-link to="/about">体育</router-link>|
            <router-link to="/about">电影</router-link>|
            <router-link to="/about">她</router-link>
        </div>
        <div class="left">
            <div class="talk_row" style="font-size:1.2rem;text-align:center">
                <TalkBox color="default" type="right"
                    >学习关于JavaScript的难点解析，让你更懂JavaScript！😗</TalkBox
                >
                <a-avatar
                    size="large"
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=573058853,1723542309&fm=26&gp=0.jpg"
                    >23213</a-avatar
                >
            </div>
            <div class="talk_row" style="font-size:1.2rem;text-align:center">
                <a-avatar
                    size="large"
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=573058853,1723542309&fm=26&gp=0.jpg"
                    >23213</a-avatar
                >
                <TalkBox color="danger" type="left"
                    >我想知道更多关于当前主流框架的实现原理，你可以帮我讲解么？🌝</TalkBox
                >
            </div>

            <div class="talk_row">
                <TalkBox color="default" type="right"
                    >没问题，原理解析模块，我详细讲解了，MVVM数据双向绑定的实现过程。😌</TalkBox
                >
                <a-avatar
                    size="large"
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=573058853,1723542309&fm=26&gp=0.jpg"
                    >23213</a-avatar
                >
            </div>
            <div class="talk_row">
                <a-avatar
                    size="large"
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=573058853,1723542309&fm=26&gp=0.jpg"
                    >23213</a-avatar
                >
                <TalkBox color="danger" type="left"
                    >关于函数响应式编程我也做了简要的介绍呢，比如知名的rxjs框架。😛</TalkBox
                >
            </div>
        </div>
        <div class="right">
            <div class="talk_row">
                <a-avatar
                    class="avtavar"
                    src="http://img1.imgtn.bdimg.com/it/u=1368658594,2712624957&fm=26&gp=0.jpg"
                />
                <TalkBox color="info" type="left"
                    >我分享了很多优秀的书籍呢，比如css揭秘，JavaScript权威指南等知名书籍😜</TalkBox
                >
            </div>
            <div class="talk_row">
                <TalkBox color="primary" type="right"
                    >喔噢，我找了很久呢，谢谢你的分享，免去了我找下链的烦恼！😝</TalkBox
                >
                <a-avatar
                    class="avtavar"
                    src="http://img1.imgtn.bdimg.com/it/u=1368658594,2712624957&fm=26&gp=0.jpg"
                />
            </div>
            <div class="talk_row">
                <a-avatar
                    class="avtavar"
                    src="http://img1.imgtn.bdimg.com/it/u=1368658594,2712624957&fm=26&gp=0.jpg"
                />
                <TalkBox color="info" type="left">你喜欢运动么？😏</TalkBox>
            </div>

            <div class="talk_row">
                <TalkBox color="primary" type="right"
                    >我可是体育粉，英超，nba都有关注，但国足实在太让我心痛了！😫</TalkBox
                >
                <a-avatar
                    class="avtavar"
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=573058853,1723542309&fm=26&gp=0.jpg"
                />
            </div>
        </div>
        <img alt="Vue logo" src="../assets/logo.png" />
        <HelloWorld />
        <!-- <e-mask>
            <TypingAnimation
                id="typing-style"
                :text="
                    'welcome，这是HMS的个人站点，我是一个前端程序员，我将会不定期的分享一些关于编程以及其他的东西'
                "
            ></TypingAnimation>
            <a-button type="default">继续</a-button>
        </e-mask> -->
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import TalkBox from '@/components/TalkBox.vue';
import TypingAnimation from '@/components/TypingAnimation.vue';
@Component({
    components: {
        HelloWorld,
        TalkBox,
        TypingAnimation,
    },
})
export default class Home extends Vue {
    private color: string = '#ff0000';
}
</script>
<style lang='less' scoped >
.home {
    text-align: center;

    .manchester {
        background-color: #1890ff;
        width: 240px;
        position: fixed;
        top: 65px;
        right: -2px;
        transform: rotate(45deg);
    }
    .santiago {
        background-color: #1890ff;
        width: 240px;
        position: fixed;
        top: 70px;
        left: -20px;
        transform: rotate(-45deg);
    }
    img {
        margin-top: 80px;
    }
    .left {
        position: absolute;
        top: 25vh;
        left: 5vw;
        .talk_row {
            display: flex;
            flex-direction: row;
            font-size: 1.2rem;
            color: aliceblue;
            .ant-avatar:nth-child(odd) {
                position: absolute;
                margin-left: -75px;
                margin-top: 40px;
            }
            .ant-avatar:nth-child(even) {
                position: absolute;
                margin-left: 235px;
                margin-top: 40px;
            }
        }
        .talk_row:nth-child(even) {
            margin-left: 240px;
        }
    }
    .right {
        position: absolute;
        right: 5vw;
        top: 25vh;
        .talk_row {
            font-size: 1.2rem;
            display: flex;
            flex-direction: row;
            color: aliceblue;
            .ant-avatar:nth-child(odd) {
                position: absolute;
                margin-left: -75px;
                margin-top: 40px;
            }
            .ant-avatar:nth-child(even) {
                position: absolute;
                margin-left: 235px;
                margin-top: 40px;
            }
        }
        .talk_row:nth-child(odd) {
            margin-left: 240px;
        }
    }
    #typing-style {
        background-color: black;

        h2 {
            color: white;
        }
    }
}
</style>
